<template>
  <!--  <nav>-->
  <!--    <router-link to="/">Home</router-link> |-->
  <!--    <router-link to="/about">About</router-link>-->
  <!--  </nav>-->
  <!--  <router-view/>-->

  <div id="root">
    <el-container>
      <el-header class="layoutCtn" id="header">
        <div>
          <img :src='testLogo' class="ws-logo">
        </div>
        <div>
          <h1>在线飞机信息显示区</h1>
        </div>
        <div>
          <h1>日期时间显示区</h1>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="layoutCtn">
          <img :src='testIcon' class="ws-icon" alt="nig">
        </el-aside>
        <el-main class="layoutCtn"></el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script lang="ts">
import {defineComponent} from "vue";
import testIcon from '@/assets/svg/testIcon.svg'
import testLogo from '@/assets/svg/testLogo.svg'

export default defineComponent({
  setup() {
    return {
      testIcon,
      testLogo
    }
  }
})
</script>

<style lang="sass">

$theme-color: #222222
$font-color: #ffffff

#app
  text-align: center
  color: $font-color

@mixin test-border
  border: 1px solid pink

.layoutCtn
  @include test-border
  background-color: $theme-color
  padding: 0!important

.ws-logo
  width: 80px
  height: 40px

.ws-icon
  width: 30px
  height: 30px

#header
  display: flex
  div:nth-child(1)
    width: 10%
  div:nth-child(2)
    width: 70%
  div:nth-child(3)
    width: 20%

</style>
